<template>
  <div style="height: 100%; width: 100%" class="workspace">
    <el-container
      ref="listWarp"
      style="height: 100%; background-color: #fafafa"
      v-loading="loading"
    >
      <div style="height: 100%; width: 100%">
        <div
          style="
            width: 100%;
            height: 130px;
            background-color: #fff;
            padding: 15px;
          "
        >
          <div style>
            <el-input
              placeholder="请输入想要搜索的应用"
              clearable
              v-model="searchV"
              size="small"
              style="width: 250px"
              @change="searchName"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <p>
              <span style="margin-right: 15px; color: #666666">类型</span>
              <el-radio-group
                size="small"
                v-model="radio1"
                fill="#F34C15"
                @change="evtPlatform"
              >
                <el-radio-button :label="1">管理类</el-radio-button>
                <el-radio-button :label="0">服务类</el-radio-button>
              </el-radio-group>
            </p>
            <p>
              <span style="margin-right: 15px; color: #666666">平台</span>
              <el-radio-group
                size="small"
                v-model="radio"
                fill="#F34C15"
                @change="evtType"
              >
                <el-radio-button :label="''">全部</el-radio-button>
                <el-radio-button
                  v-for="(item, index) in systemOptions"
                  :key="index"
                  :label="item.code"
                  v-if="item.oneFlag"
                  >{{ item.name }}
                </el-radio-button>
              </el-radio-group>
            </p>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: auto;
            background-color: #fff;
            padding: 15px;
            margin-top: 25px;
          "
          class="wrap"
          v-for="(item, index) in systemOptions"
          :key="index"
          v-if="item.flag"
        >
          <p style="font-size: 16px; color: #333333">{{ item.name }}</p>
          <div
            style="
              width: 12%;
              text-align: center;
              background-color: #fafafa;
              padding: 15px 10px;
              cursor: pointer;
              margin: 5px 15px;
              float: left;
            "
            class="flex bank"
            v-for="(item, index) in personalApplication.filter(
              (e) => e.systemCode == item.code
            )"
            :key="index"
          >
            <div
              @click="checkUrl(item)"
              target="_blank"
              class="flex"
              rel="noopener noreferrer"
              style="
                text-decoration: none;
                width: 100%;
                height: 100%;
                text-align: center;
                background-color: #fafafa;
                cursor: pointer;
                border-radius: 8px;
              "
            >
              <div style="margin: 0 15px">
                <img
                  style="width: 40px; height: 40px"
                  :src="$itsoftUI.config.fileImgUrl + item.pcIcon"
                  alt
                  srcset
                />
              </div>
              <div style="width: 70%">
                <span
                  style="display: block; color: #333333; text-align: left"
                  >{{ item.name }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <div
          style="
            width: 100%;
            height: calc(100% - 150px);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #777;
            background-color: #fff;
          "
          v-if="personalApplication.length == 0"
        >
          暂无应用
        </div>
      </div>
    </el-container>
  </div>
</template>
<script>
import { indexApi } from "@/api/home/index";

export default {
  name: "index",
  data() {
    return {
      searchV: "",
      radio1: 1,
      radio: "",
      loading: false,
      systemOptions: null, //存放系统列表
      personalApplication: [],
      serach: "",
      type: "",
      systemCode: "",
      options: null,
      num: 0,
    };
  },
  methods: {
    checkUrl(item) {
      let urlList = item.pcUrl.split("/");
      if (urlList[1] == "formGenerator") {
        indexApi.checkUserRole(urlList[urlList.length - 1]).then((res) => {
          if (res.errorCode == "0") {
            window.open(
              this.$itsoftUI.config.systemUrl +
                item.pcUrl +
                `?redirect=${this.$itsoftUI.config.localUrl}`,
              "_blank"
            );
          } else {
            this.$message.error(res.message);
          }
        });
      } else {
        window.open(this.$itsoftUI.config.systemUrl + item.pcUrl, "_blank");
      }
    },
    searchName(searchV) {
      this.serach = searchV;
      this.getPersonalApplicationList();
    },
    evtPlatform(val) {
      this.type = val;
      this.num = 0;
      this.systemCode = "";
      this.radio = "";
      this.getPersonalApplicationList();
    },
    evtType(val) {
      this.systemCode = val;
      this.getPersonalApplicationList();
    },
    //应用
    getPersonalApplicationList() {
      this.loading = true;
      indexApi
        .personalApplicationList(this.type, this.serach, this.systemCode)
        .then((res) => {
          if (res.status === "success") {
            this.personalApplication = res.data;
            if (this.num == 0) {
              indexApi.systemList().then((res) => {
                this.systemOptions = res;
                this.systemOptions.forEach((t) => {
                  t.flag = false;
                  t.oneFlag = false;
                  let list = [];
                  this.personalApplication.forEach((r) => {
                    if (t.code == r.systemCode) {
                      t.flag = true;
                      t.oneFlag = true;
                    }
                  });
                });
              });
            } else {
              this.systemOptions.forEach((t) => {
                t.flag = false;
                let list = [];
                this.personalApplication.forEach((r) => {
                  if (t.code == r.systemCode) {
                    t.flag = true;
                  }
                });
              });
            }
            this.num = this.num + 1;

            this.loading = false;
          }
        });
    },
  },
  created() {
    if (this.$route.query.type) {
      this.radio1 = this.$route.query.type;
      this.type = this.$route.query.type;
    } else {
      this.type = 1;
    }
    this.getPersonalApplicationList();
  },
  mounted() {},
  watch: {
    $route: function () {},
  },
};
</script>
<style lang="scss" scoped>
.bank:hover {
  box-shadow: 2px 3px 12px 0 rgba(170, 170, 170, 0.35);
}

.workspace {
  ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #f34c15 !important;
    border: none;
    box-shadow: none;
  }

  ::v-deep .el-radio-button--small .el-radio-button__inner {
    margin: 0 10px;
    border: 1px solid #dcdfe6;
    border-radius: 25px !important;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.wrap:after {
  clear: both;
  content: "";
  height: 0;
  visibility: hidden;
  display: block;
}
</style>

